<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false" clrModalSize="lg">
    <h3 class="modal-title">{{"APP_ADD"|translate}}{{"APP_STORAGE_CLASS"|translate}}</h3>
    <div class="modal-body">
        <form clrForm #itemForm='ngForm'>
            <clr-input-container>
                <label>{{"APP_NAME"|translate}}</label>
                <input clrInput [size]="34" name="name"
                       pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*"
                       [(ngModel)]="item.metadata.name" required>
                <clr-control-helper>{{'APP_STORAGE_NAME_HELPER'|translate}}</clr-control-helper>
            </clr-input-container>

            <clr-select-container>
                <label>{{"APP_PROVISIONER"|translate}}</label>
                <select name="provisioner" [(ngModel)]="provisioner" (change)="onProvisionerChange()" clrSelect
                        required>
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option [ngValue]="p" *ngFor="let p of provisioners" [disabled]="p.status !== 'Running'">
                        [{{p.type}}]{{p.name}}
                    </option>
                </select>
            </clr-select-container>

            <app-modal-alert></app-modal-alert>

            <table class="table table-vertical" *ngIf="provisioner&&provisioner.type==='nfs'">
                <tbody>
                <tr>
                    <th>{{'APP_PROVISIONER_NAME'|translate}}</th>
                    <td>
                        <input [size]="34" class="clr-input" name="provisioner_name" [(ngModel)]="item.provisioner"
                               disabled>
                    </td>
                </tr>
                </tbody>
            </table>

            <table class="table table-vertical" *ngIf="provisioner&&provisioner.type==='rook-ceph'">
                <tbody>
                <tr>
                    <th>{{'APP_PROVISIONER_NAME'|translate}}</th>
                    <td>
                        <input [size]="34" class="clr-input" name="provisioner_name" [(ngModel)]="item.provisioner"
                               disabled>
                    </td>
                </tr>
                </tbody>
            </table>

            <table class="table table-vertical" *ngIf="provisioner&&provisioner.type==='vsphere'">
                <tbody>
                <tr>
                    <th>{{'APP_PROVISIONER_NAME'|translate}}</th>
                    <td>
                        <input [size]="34" class="clr-input" name="provisioner_name" [(ngModel)]="item.provisioner"
                               disabled>
                    </td>
                </tr>

                <tr>
                    <th>{{'APP_STORAGE_POLICY_TYPE'|translate}}</th>
                    <td>
                        <clr-radio-container clrInline>
                            <clr-radio-wrapper>
                                <input type="radio" clrRadio required value="BuiltIn"
                                       [(ngModel)]="item.parameters['storagePolicyType']" name="storagePolicyType"/>
                                <label>{{'APP_BUILT_IN'|translate}}</label>
                            </clr-radio-wrapper>
                            <clr-radio-wrapper>
                                <input type="radio" clrRadio required value="Custom"
                                       [(ngModel)]="item.parameters['storagePolicyType']" name="storagePolicyType"/>
                                <label>{{'APP_CUSTOM'|translate}}</label>
                            </clr-radio-wrapper>
                        </clr-radio-container>
                    </td>

                <tr *ngIf="item.parameters['storagePolicyType']==='BuiltIn'">
                    <th>{{'APP_STORAGE_POLICY'|translate}}</th>
                    <td>
                        <select required [(ngModel)]="item.parameters['storagePolicyName']" name="storagePolicy">
                            <option value="vSAN Default Storage Policy">vSAN Default Storage Policy</option>
                            <option value="Management Storage Policy - Large">Management Storage Policy - Large</option>
                            <option value="Management Storage Policy - Single Node">Management Storage Policy - Single
                                Node
                            </option>
                            <option value="Management Storage policy - Thin">Management Storage policy - Thin</option>
                            <option value="Management Storage Policy - Regular">Management Storage Policy - Regular
                            </option>
                            <option value="Management Storage Policy - Stretched">Management Storage Policy -
                                Stretched
                            </option>
                        </select>
                    </td>
                </tr>
                <tr *ngIf="item.parameters['storagePolicyType']==='Custom'">
                    <th>{{'APP_STORAGE_POLICY'|translate}}</th>
                    <td>
                        <input required size="34" [(ngModel)]="item.parameters['storagePolicyName']"
                               name="storagePolicy">
                    </td>
                </tr>
                </tbody>
            </table>

            <table class="table table-vertical" *ngIf="provisioner&&provisioner.type==='external-ceph'">
                <tbody>
                <tr>
                    <th>Provisioner</th>
                    <td>
                        <input [size]="34" class="clr-input" name="provisioner_name" [(ngModel)]="item.provisioner"
                               disabled>
                    </td>
                </tr>
                <tr>
                    <th>Monitor</th>
                    <td>
                        <input [size]="34" class="clr-input" name="monitor" placeholder="eg: 172.16.10.10:6389"
                               [(ngModel)]="item.parameters['monitors']"
                        >
                    </td>
                </tr>
                <tr>
                    <th>OSD Pool</th>
                    <td>
                        <input [size]="34" class="clr-input" name="osd_pool" placeholder="eg: kube"
                               [(ngModel)]="item.parameters['pool']"
                        >
                    </td>
                </tr>
                <tr>
                    <th>Admin Id</th>
                    <td>
                        <input [size]="34" class="clr-input" name="admin_id" placeholder="eg: kube"
                               [(ngModel)]="item.parameters['adminId']"
                        >
                    </td>
                </tr>
                <tr>
                    <th>Admin Secret Name</th>
                    <td>
                        <input [size]="34" class="clr-input" name="admin_secret" placeholder="eg: secret"
                               [(ngModel)]="item.parameters['adminSecretName']"
                        >
                    </td>
                </tr>
                <tr>
                    <th>Admin Secret Namespace</th>
                    <td>
                        <input [size]="34" class="clr-input" name="admin_secret_namespace" placeholder="eg: kube-system"
                               [(ngModel)]="item.parameters['adminSecretNamespace']"
                        >
                    </td>
                </tr>
                <tr>
                    <th>User Id</th>
                    <td>
                        <input [size]="34" class="clr-input" name="user_id" placeholder="eg: kube"
                               [(ngModel)]="item.parameters['userId']"
                        >
                    </td>
                </tr>
                <tr>
                    <th>User Secret Name</th>
                    <td>
                        <input [size]="34" class="clr-input" name="user_secret" placeholder="eg: secret"
                               [(ngModel)]="item.parameters['userSecretName']"
                        >
                    </td>
                </tr>
                <tr>
                    <th>FS Type</th>
                    <td>
                        <input [size]="34" class="clr-input" name="fsType" placeholder="eg: ext4"
                               [(ngModel)]="item.parameters['fsType']"
                        >
                    </td>
                </tr>
                <tr>
                    <th>ImageFormat</th>
                    <td>
                        <input [size]="34" class="clr-input" name="imageFormat" placeholder="eg: 2"
                               [(ngModel)]="item.parameters['imageFormat']"
                        >
                    </td>
                </tr>
                </tbody>
            </table>

            <table class="table table-vertical" *ngIf="provisioner&&provisioner.type==='glusterfs'">
                <tbody>
                    <tr>
                        <th>{{'APP_PROVISIONER_NAME'|translate}}</th>
                        <td>
                            <input [size]="34" class="clr-input" name="provisioner_name" [(ngModel)]="item.provisioner" disabled>
                        </td>
                    </tr>
                    <tr>
                        <th>REST URL</th>
                        <td>
                            <input [size]="34" class="clr-input" name="resturl" placeholder="eg: 172.0.0.1:8081" [(ngModel)]="item.parameters['resturl']" required>
                        </td>
                    </tr>
                    <tr>
                        <th>REST USER</th>
                        <td>
                            <input [size]="34" class="clr-input" name="restuser" placeholder="eg: admin" [(ngModel)]="item.parameters['restuser']" required>
                        </td>
                    </tr>
                    <tr>
                        <th>REST PASSWORD</th>
                        <td>
                            <input [size]="34" type="password" class="clr-input" name="restuserkey" [(ngModel)]="item.parameters['restuserkey']" required>
                        </td>
                    </tr>
                    <tr>
                        <th>Namespace</th>
                        <td>
                            <input (change)="checkSecrets()" [size]="34" class="clr-input" name="secretNamespace" placeholder="eg: kube-system" [(ngModel)]="item.parameters['secretNamespace']" required>
                        </td>
                    </tr>
                    <tr>
                        <th>Secret Name</th>
                        <td>
                            <input (change)="checkSecrets()" [size]="34" class="clr-input" name="secretName" placeholder="eg: heketi-secret" [(ngModel)]="item.parameters['secretName']" required>
                            <clr-control-helper *ngIf="isSecretsExit" style="color: red;">{{'SECRET_NAME_IS_EXIST'|translate}}</clr-control-helper>
                        </td>
                    </tr>
                    <tr>
                        <th>CLUSTER ID</th>
                        <td>
                            <input [size]="34" class="clr-input" name="clusterid" placeholder="eg: 8a4ff57af81910e8324368a23afe3bdc" [(ngModel)]="item.parameters['clusterid']" required>
                        </td>
                    </tr>
                    <tr>
                        <th>GID MIN</th>
                        <td>
                            <input [size]="34" class="clr-input" name="gidMin" placeholder="eg: 40000" [(ngModel)]="item.parameters['gidMin']" required>
                        </td>
                    </tr>
                    <tr>
                        <th>GID MAX</th>
                        <td>
                            <input [size]="34" class="clr-input" name="gidMax" placeholder="eg: 50000" [(ngModel)]="item.parameters['gidMax']" required>
                        </td>
                    </tr>
                    <tr>
                        <th>VOLUME TYPE</th>
                        <td>
                            <input [size]="34" class="clr-input" name="volumetype" placeholder="eg: replicate:3" [(ngModel)]="item.parameters['volumetype']" required>
                        </td>
                    </tr>
                </tbody>
            </table>

            <table class="table table-vertical" *ngIf="provisioner&&provisioner.type==='oceanstor'">
                <tbody>
                <tr>
                    <th>volumeType</th>
                    <td>
                        <div class="clr-select-wrapper">
                            <select class="clr-select" [(ngModel)]="item.parameters['volumeType']"
                                    name="oceanstor_sc_volume" required>
                                <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                                <option value="lun">lun</option>
                                <option value="fs">fs</option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr *ngIf="item.parameters['volumeType']==='fs'">
                    <th>authClient</th>
                    <td>
                        <div class="clr-control-container">
                            <div class="clr-input-wrapper">
                                <input [size]="34" class="clr-input" name="authClient" placeholder="demo1,demo2"
                                       [(ngModel)]="item.parameters['authClient']" required>
                            </div>
                            <span class="clr-subtext">{{'APP_OCEAN_STOR_AUTHCLIENT'|translate}}</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>allocType</th>
                    <td>
                        <div class="clr-control-container">
                            <div class="clr-select-wrapper">
                                <select class="clr-select" [(ngModel)]="item.parameters['allocType']"
                                        name="oceanstor_sc_alloc"
                                        required>
                                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                                    <option value="thin">thin</option>
                                    <option value="thick">thick</option>
                                </select>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>cloneFrom</th>
                    <td>
                        <div class="clr-control-container">
                            <div class="clr-input-wrapper">
                                <input [size]="34" class="clr-input" name="cloneFrom"
                                       [(ngModel)]="item.parameters['cloneFrom']">
                            </div>
                            <span class="clr-subtext">{{'APP_OCEAN_STOR_CLONEFROM'|translate}}</span>
                        </div>

                    </td>
                </tr>
                <tr>
                    <th>cloneSpeed</th>
                    <td>
                        <div class="clr-control-container">
                            <div class="clr-input-wrapper">
                                <input [size]="34" class="clr-input" name="cloneSpeed"
                                       [(ngModel)]="item.parameters['cloneSpeed']" placeholder="1-4">
                            </div>
                            <span class="clr-subtext">{{'APP_OCEAN_STOR_CLONSPEED'|translate}}</span>
                        </div>

                    </td>
                </tr>
                <tr *ngIf="item.parameters['oceanstor_sc_volume']==='lun'">
                    <th>fsType</th>
                    <td>
                        <div class="clr-select-wrapper">
                            <select class="clr-select" [(ngModel)]="item.parameters['fsType']"
                                    name="oceanstor_sc_alloc">
                                <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                                <option value="ext2">ext2</option>
                                <option value="ext3">ext3</option>
                                <option value="ext4">ext4</option>
                            </select>
                        </div>
                        <span class="clr-subtext">{{'APP_OCEAN_STOR_FSTYPE'|translate}}</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()"
                [disabled]="isSubmitGoing">{{'APP_CANCEL'|translate}}</button>
        <button type="button" class="btn btn-primary" (click)="onSubmit()" [clrLoading]="isSubmitGoing"
                [disabled]="itemForm.invalid || isSecretsExit">{{'APP_COMMIT'|translate}}</button>
    </div>
</clr-modal>
